<template>
  <view class="mine">
    <uni-nav-bar
      title="我的"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
    ></uni-nav-bar>

    <!-- <view class="header">
      <view
        :style="{
          height: `calc(${$sys().statusBarHeight}px)`
        }"
      ></view>
      <view class="header-left-title">
        <image :src="$img('/static/img2/cc5.png')" mode="scaleToFill" />
      </view>
    </view> -->

    <view
      class="user-card c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc221.png')})`
      }"
    >
      <view class="user-info">
        <view class="avatar" @click="$c.to({ url: '/pages/user/change' })">
          <image :src="userinfo.headimg" mode="scaleToFill" />
        </view>

        <view class="info">
          <view v-if="userinfo.nickname" class="nick hang1">
            {{ userinfo.nickname }}
          </view>

          <view
            v-else
            class="nick"
            @click="$c.to({ url: '/pages/user/login' })"
          >
            去登录
          </view>

          <view v-if="userinfo" class="user-day">
            简单模玩已经陪你走过了{{ userinfo.day }}天
          </view>
        </view>
      </view>

      <view v-if="userinfo" class="lv-box">
        <view class="lv">
          {{ userinfo.quan_yi_level.title }}
        </view>

        <view class="progress">
          <cmd-progress
            :percent="userinfo.quan_yi_level.jindu"
            :show-info="false"
            stroke-color=" linear-gradient(90deg, #FF1010 0%, #A10000 100%)"
            :strokeWidth="8"
          ></cmd-progress>
        </view>

        <view v-if="userinfo.quan_yi_level.cha > 0" class="should">
          差{{ userinfo.quan_yi_level.cha }}欧气值升级
        </view>
        <view v-else-if="userinfo.quan_yi_level.cha == -1" class="should">
          已满级
        </view>

        <view class="quan-yi" @click="$c.to({ url: '/package/mine/equity' })">
          <image :src="$img('/static/img2/cc219.png')" lazy-load></image>
        </view>
      </view>

      <!-- 会员中心 -->
      <!-- <view class="rbtn" @click="$c.to({ url: '/pages/user/vip' })">
        <image :src="$img('/static/img2/cc130.png')" lazy-load></image>
      </view> -->

      <!-- <view class="rbtn btn1">
        <button class="hide" open-type="contact"></button>

        客服
      </view> -->
    </view>

    <view class="money-list">
      <view
        class="money-item c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc218.png')})`
        }"
        @click="$c.to({ url: '/pages/user/yetx' })"
      >
        <view class="money-title">余额></view>

        <view class="money-btn">
          <view class="money">{{ userinfo.money || '0.00' }}</view>

          <view class="btn">
            <image :src="$img('/static/img2/cc222.png')" lazy-load></image>
          </view>
        </view>
      </view>

      <!-- <view
        class="money-item c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc218.png')})`
        }"
        @click="$c.to({ url: '/pages/user/bi_jl' })"
      >
        <view class="money-title">幸运币></view>

        <view class="money-btn">
          <view class="money">{{ userinfo.integral || '0.00' }}</view>

          <view class="btn">
            <image :src="$img('/static/img2/cc222.png')" lazy-load></image>
          </view>
        </view>
      </view> -->

      <view
        class="money-item c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc218.png')})`
        }"
        @click="$c.to({ url: '/pages/user/jf_jl' })"
      >
        <view class="money-title">积分></view>

        <view class="money-btn">
          <view class="money">{{ userinfo.score || '0.00' }}</view>

          <view class="btn">
            <image :src="$img('/static/img2/cc222.png')" lazy-load></image>
          </view>
        </view>
      </view>

      <!-- <view
        class="money-item c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc218.png')})`
        }"
        @click="$c.to({ url: '/pages/user/my_coupon' })"
      >
        <view class="money-title">欧气券></view>

        <view class="money-btn">
          <view class="money">{{ userinfo.coupon || '0' }}</view>

          <view class="btn">
            <image :src="$img('/static/img2/cc222.png')" lazy-load></image>
          </view>
        </view>
      </view> -->
    </view>

    <view
      v-if="taskList.length > 0"
      class="task c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc131.png')})`
      }"
    >
      <view class="task-title">主要任务</view>

      <view class="task-item" v-for="(item, i) in taskList" :key="i">
        <view class="task-l">
          <view class="title">{{ item.title }}</view>

          <view class="num">积分+{{ item.z_number }}</view>

          <view class="progress">
            <view class="progress-inner">
              <cmd-progress
                :percent="item.percentage"
                :show-info="false"
                stroke-color=" linear-gradient(90deg, #FF1010 0%, #A10000 100%)"
                :strokeWidth="5"
              ></cmd-progress>
            </view>

            {{ item.ywc_count }}/{{ item.number }}
          </view>
        </view>

        <view class="task-r">
          <view
            v-if="item.is_complete == 0"
            class="btn c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc232.png')})`
            }"
            @click="taskTo(item)"
          >
            <text>去完成</text>
          </view>

          <view
            v-if="item.is_complete == 1"
            class="btn c_bg act"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc232.png')})`
            }"
            @click="completeTask(item)"
          >
            <text>待领取</text>
          </view>

          <view
            v-if="item.is_complete == 2"
            class="btn c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc232.png')})`
            }"
          >
            <text>已领取</text>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-card">
      <template v-for="(item, i) in menuList">
        <!-- 客服按钮 -->
        <view v-if="item.id == 12" class="menu-item" :key="i">
          <button class="hide" open-type="contact"></button>

          <view class="icon">
            <image :src="$img(item.icon)" lazy-load></image>
          </view>

          <view class="title">
            {{ item.title }}
          </view>
        </view>

        <view
          v-else-if="item.show"
          class="menu-item"
          :key="i"
          @click="menuTo(item)"
        >
          <view class="icon">
            <image :src="$img(item.icon)" lazy-load></image>
          </view>

          <view class="title">
            {{ item.title }}
          </view>
        </view>
      </template>
    </view>

    <!-- #ifdef MP -->
    <!-- <view class="copyright">闽ICP备2023024260号-1X</view> -->
    <!-- #endif -->

    <tab-bar :index="4"></tab-bar>

    <!-- 群聊弹窗 -->
    <uni-popup ref="qunliao_show" type="center">
      <view
        class="pop common_bg"
        :style="{
          'background-image': `url(${$img('/static/img2/cc28.png')})`
        }"
      >
        <image :src="ewm" :show-menu-by-longpress="true"></image>

        <!-- <view @click="$refs.qunliao_show.close()" class="icon">
          <image :src="$img('/static/img/close1.png')" mode="scaleToFill" />
        </view> -->
      </view>
    </uni-popup>

    <!-- 余额充值弹窗 -->
    <uni-popup ref="chongzhi_show" type="bottom">
      <view class="order animated fadeInUp">
        <view class="order_title">
          <view class="title">余额充值</view>
          <view class="ca" @click="$refs.chongzhi_show.close()">
            <image
              :src="$img('/static/icon/close1.png')"
              style="width: 30rpx; height: 30rpx; margin-top: 14rpx"
            ></image>
          </view>
        </view>
        <view class="pop_coucent">
          <view>选择充值金额</view>
          <view class="pop_box">
            <view
              class="common_bg"
              @click="money_1 = v"
              v-for="(v, i) in moneyArr"
              :key="i"
              :style="{
                'background-image': `url(${$img(
                  money_1 == v
                    ? '/static/img/mine_chong_tab_bg_act.png'
                    : '/static/img/mine_chong_tab_bg.png'
                )})`
              }"
            >
              ￥
              <text style="font-size: 32rpx">{{ v }}</text>
            </view>
          </view>
        </view>
        <view class="pop_coucent">
          <view>输入充值金额</view>
          <input
            type="text"
            placeholder="请输入金额，最低1元"
            v-model="money_1"
            placeholder-style="color:#999999"
          />
        </view>

        <view class="chong-bt">
          <view class="money">需支付:{{ money_1 || 0 }}元</view>

          <view
            @click="chongzhi_click"
            class="pay-btn common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/mine_qrcz.png')})`
            }"
          ></view>
        </view>

        <!-- <view
          class="pop_chongzhi"
          @click="chongzhi_click"
          :style="
            'background: url(' +
            z_imgPath +
            'mine/allBtn_bg.png' +
            ') no-repeat 0 0 / 100% 100%;'
          "
        >
          确认充值
        </view> -->
      </view>
    </uni-popup>
    <!-- 余额提现 -->
    <view class="mengban animated fadeIn" v-if="tixian_show">
      <view class="order animated fadeInUp">
        <view class="order_title">
          <image
            :src="z_imgPath + 'mine/tx_tips.png'"
            style="width: 162rpx; height: 47rpx"
          ></image>
          <view class="ca" @click="tixian_show = false">
            <image
              :src="z_imgPath + 'mine/qu_close.png?11'"
              style="width: 48rpx; height: 48rpx; margin-top: 14rpx"
            ></image>
          </view>
        </view>
        <view class="pop_head">
          <view @click="tixian_index = 1">
            <text :class="tixian_index == 1 ? 'xzs' : 'wzs'">微信零钱</text>
            <view class="qiehuan_line" v-if="tixian_index == 1"></view>
          </view>
          <view @click="tixian_index = 2">
            <text :class="tixian_index == 2 ? 'xzs' : 'wzs'">支付宝</text>
            <view class="qiehuan_line" v-if="tixian_index == 2">
              <!-- <image src="../../static/shouye/top.png"></image> -->
            </view>
          </view>
        </view>
        <view class="pop_coucent" v-if="tixian_index == 1">
          <view>输入提现金额</view>
          <view class="flex_center pop_tixian_input">
            <input
              type="number"
              placeholder="￥请输入金额，最低1元"
              placeholder-style="font-size:24rpx"
              :value="money_2"
              @input="getmoney_2"
            />
            <view style="color: #1ff7f0" @click="money_2 = userinfo.money">
              全部提现
            </view>
          </view>
          <view class="flex_center" style="justify-content: space-between">
            <view>到账账户</view>
            <view style="color: #999999">微信零钱</view>
          </view>
        </view>
        <view
          class="pop_coucent"
          style="padding: 0 30rpx"
          v-if="tixian_index == 2"
        >
          <view class="flex_center name_phone">
            <view>姓名</view>
            <input type="text" placeholder="请输入姓名" @input="getname" />
          </view>
          <view class="flex_center name_phone">
            <view>账户</view>
            <input
              type="text"
              placeholder="请输入支付宝账号"
              @input="getnumber"
            />
          </view>
          <view style="margin-top: 30rpx">输入提现金额</view>
          <view class="flex_center pop_tixian_input" style="border: none">
            <input
              type="number"
              placeholder="￥请输入金额，最低1元"
              placeholder-style="font-size:24rpx"
              :value="money_2"
              @input="getmoney_2"
            />
            <view style="color: #1ff7f0" @click="money_2 = userinfo.money">
              全部提现
            </view>
          </view>
        </view>
        <view
          class="pop_chongzhi"
          @click="tixian_click"
          :style="
            'background: url(' +
            z_imgPath +
            'mine/allBtn_bg.png' +
            ') no-repeat 0 0 / 100% 100%;'
          "
        >
          确认提现
        </view>
        <!-- <image :src="z_imgPath+'mine/qrtx.png'" class="pop_chongzhi" @click="tixian_click()"></image> -->
      </view>
    </view>

    <uni-popup ref="cdkPop" type="center">
      <view
        class="cdk-pop c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc182.png')})`
        }"
      >
        <view class="cdk-pop-hd">兑换码</view>

        <view class="cdk-pop-bd">
          <input v-model="cdk_" placeholder="请输入兑换码" />
        </view>

        <view
          class="cdk-pop-ft c_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc183.png')})`
          }"
          @click="$c.noDouble(receiveCdk)"
        ></view>
      </view>
    </uni-popup>

    <uni-popup
      ref="resPop"
      type="center"
      mask-background-color="rgba(0,0,0,0.8)"
    >
      <view v-if="prizeRes" class="res-pop">
        <view class="suc-list">
          <view class="suc-title">
            <image :src="$img('/static/img2/cc66.png')" lazy-load></image>
          </view>

          <scroll-view class="list-wrap" scroll-y>
            <!-- v-for="(item, i) in prizeRes"
              :key="i" -->
            <view
              v-if="prizeRes.coupon.title"
              class="list-item common_bg"
              :style="{
                backgroundImage: `url(${$img('/static/img2/cc149.png')})`
              }"
            >
              <view class="money">
                ¥
                <text>{{ prizeRes.coupon.price }}</text>
              </view>

              <view class="info">
                <view class="title">{{ prizeRes.coupon.title }}</view>

                <view class="time">
                  领取后{{ prizeRes.coupon.effective_day }}天到期
                </view>
              </view>

              <view
                class="btn c_bg"
                :style="{
                  backgroundImage: `url(${$img('/static/img2/cc150.png')})`
                }"
                @click="$c.to({ type: 3, url: '/pages/shouye/index' })"
              >
                <!-- 去使用 -->
              </view>
            </view>

            <view
              v-if="prizeRes.goodslist.title"
              class="list-item common_bg"
              :style="{
                backgroundImage: `url(${$img('/static/img2/cc149.png')})`
              }"
            >
              <view class="pic">
                <image :src="prizeRes.goodslist.imgurl" lazy-load></image>
              </view>

              <view class="info">
                <view class="title hang1">
                  {{ prizeRes.goodslist.title }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="close icon" @click="$refs.resPop.close()">
          <image :src="$img('/static/img2/cc124.png')" lazy-load></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      z_imgPath: this.$z_img2,
      userinfo: '',
      moneyArr: [100, 200, 500, 1000, 3000],
      menuList: [
        {
          id: 1,
          show: true,
          title: '消费记录',
          icon: '/static/img2/cc223.png',
          path: '/pages/user/xfjl'
        },
        {
          id: 2,
          show: false,
          title: '兑换记录',
          icon: '/static/img2/cc226.png',
          path: '/pages/user/hsjl'
        },
        {
          id: 12,
          show: true,
          title: '客服',
          icon: '/static/img2/cc227.png',
          path: ''
        },
        // {
        //   id: 3,
        //   show: true,
        //   title: '我的收藏',
        //   icon: '/static/img2/2_wdsc.png',
        //   path: '/package/mine/collect'
        // },
        {
          id: 4,
          show: true,
          title: '优惠券',
          icon: '/static/img2/cc229.png',
          path: '/pages/user/coupon'
        },
        {
          id: 5,
          show: true,
          title: '邀请好友',
          icon: '/static/img2/cc224.png',
          path: '/pages/user/tui-guang'
        },
        {
          id: 6,
          show: true,
          title: '加入福利群',
          icon: '/static/img2/cc231.png',
          path: ''
        },
        {
          id: 7,
          show: true,
          title: '用户协议',
          icon: '/static/img2/cc228.png',
          path: '/pages/guize/guize?type=4'
        },
        // {
        //   id: 8,
        //   show: true,
        //   title: '道具卡',
        //   icon: '/static/img2/cc230.png',
        //   path: '/package/mine/skill-card'
        // },
        // {
        //   id: 9,
        //   show:true,
        //   title: '挂售记录',
        //   icon: '/static/img/2_gsjl.png',
        //   path: ''
        // },
        // {
        //   id: 10,
        //   show:true,
        //   title: '晋升排行榜',
        //   icon: '/static/img/2_jsphb.png',
        //   path: '/pages/shouye/bangdan'
        // },
        // {
        //   id: 11,
        //   show: false,
        //   title: '集市',
        //   icon: '/static/tabbar/6.png',
        //   path: '/pages/market/market'
        // },
        {
          id: 13,
          show: true,
          title: '商城订单',
          icon: '/static/img2/cc225.png',
          path: '/package/mine/mall-order'
        },
        {
          id: 14,
          show: true,
          title: '兑换码',
          icon: '/static/img2/cc234.png',
          path: ''
        }
      ],
      // 余额充值金额
      money_1: '',
      // 二维码
      ewm: '',
      // 1:微信提现 2:支付宝提现
      tixian_index: 1,
      // 余额提现金额
      money_2: '',
      // 提现姓名
      name: '',
      // 提现账户
      number: '',
      // 收藏数组
      mycollectArr: [],

      list: [
        {
          // img: 'mine/img01.png?1',
          // sel: 'mine/sel01.png?1',
          name: '一番赏收藏'
        },
        {
          // img: 'mine/img02.png?1',
          // sel: 'mine/sel02.png?1'
          name: '无限池收藏'
        }
      ],
      show: 1,
      tixian_show: false,
      taskList: [],
      prizeRes: '',

      cdk_: ''
    }
  },

  onShareAppMessage() {
    return {
      title: '快来加入简单模玩~',
      // imageUrl: '',
      path: '/pages/user/index?pid=' + uni.getStorageSync('userinfo').ID
    }
  },

  onLoad(e) {
    if (e.ou_coupon_id) {
      uni.setStorageSync('_ou_coupon_id', e.ou_coupon_id)
    }
    if (e.pid) {
      uni.setStorageSync('pid', e.pid)
    }
  },

  onShow(e) {
    this.getdata()
    // this.getmycollect()
    let that = this
    console.log(e)
  },

  onReady() {
    // this.$refs.cdkPop.open()
    // this.$refs.resPop.open()
  },

  onHide() {
    uni.setStorageSync('page', this.$mp.page.route)
  },

  methods: {
    /**
     * 任务跳转
     */
    taskTo(item) {
      if (!item.pages) {
        return
      }

      this.$c.to({
        url: item.pages,
        fail: () => {
          this.$c.to({
            type: 3,
            url: item.pages
          })
        }
      })
    },

    /**
     * cdk兑换
     */
    receiveCdk() {
      this.req({
        url: 'receive_convert_code',
        data: {
          code: this.cdk_
        },
        success: res => {
          if (res.status == 1) {
            this.$refs.cdkPop.close()
            this.prizeRes = res.data
            this.$refs.resPop.open()
          }
        }
      })
    },

    receiveCoupon() {
      const coupon_id = uni.getStorageSync('_ou_coupon_id')

      this.req({
        url: 'coupon_ling',
        data: {
          coupon_id
        },
        success: res => {
          uni.removeStorageSync('_ou_coupon_id')

          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 500,
              success: () => {
                this.$c.to({
                  url: '/package/mine/coupon-detail',
                  query: {
                    id: coupon_id
                  }
                })
              }
            })
          } else if (res.status == 2222) {
            this.$c.to({
              url: '/package/mine/coupon-detail',
              query: {
                id: coupon_id
              }
            })
          }
        }
      })
    },

    completeTask(item) {
      this.req({
        url: 'ling_task',
        data: {
          task_list_id: item.id
        },
        success: res => {
          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 500,
              success: () => {
                this.getdata()
              }
            })
          }
        }
      })
    },

    menuTo(item) {
      switch (item.id) {
        case 6:
          this.$refs.qunliao_show.open()
          break
        case 14:
          this.cdk_ = ''
          this.$refs.cdkPop.open()
          break
        default:
          this.$c.to({
            url: item.path
          })
          break
      }
    },

    copy(e) {
      uni.setClipboardData({
        data: `${e}`,
        success: result => {},
        fail: error => {}
      })
    },

    tokefu() {
      // #ifdef  MP-WEIXIN
      wx.openCustomerServiceChat({
        extInfo: {
          url: uni.getStorageSync('wx_link') //客服地址链接
        },
        corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
        success(res) {
          console.log(res, 1)
        },
        fail(res) {
          console.log(res, 2)
        }
      })
      // #endif
    },
    getPhoneNumber(e) {
      // console.log(e)
      let that = this
      uni.login({
        success(res) {
          // console.log(res)
          uni.checkSession({
            success() {
              that.req({
                url: 'login_bind_mobile',
                data: {
                  code: e.detail.code,
                  encryptedData: e.detail.encryptedData,
                  iv: e.detail.iv
                },
                success(res) {
                  if (res.status == 1) {
                    uni.showToast({
                      title: '绑定成功~',
                      success() {
                        that.getdata()
                      }
                    })
                  }
                }
              })
            }
          })
        }
      })
    },

    getlist(index) {
      this.show = index
      this.mycollectArr = []
      this.getmycollect()
    },
    todetail(a) {
      if (a.type == 2) {
        uni.navigateTo({
          url: '/pages/shouye/detail_wuxian?goods_id=' + a.goods_id
        })
      } else {
        uni.navigateTo({
          url:
            '/pages/shouye/detail?goods_id=' +
            a.goods_id +
            '&goods_num=' +
            a.num
        })
      }
    },

    del_soucang(a) {
      let that = this
      that.req({
        url: 'delCollect',
        data: {
          id: a
        },
        success(res) {
          if (res.status == 1) {
            that.getmycollect()
          }
        }
      })
    },

    chongzhi_click() {
      let that = this
      that.req({
        url: 'recharge',
        data: {
          money: that.money_1
        },
        success(res) {
          if (res.status == 1) {
            uni.requestPayment({
              provider: 'wxpay',
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: 'MD5',
              paySign: res.data.paySign,
              complete(res) {
                if (res.errMsg == 'requestPayment:fail cancel') {
                  uni.showToast({
                    title: '取消支付',
                    icon: 'loading',
                    duration: 1000
                  })
                }
                if (res.errMsg == 'requestPayment:ok') {
                  that.$refs.chongzhi_show.close()
                  that.getdata()
                }
              }
            })
          }
        }
      })
    },

    getdata() {
      let that = this
      that.req({
        url: 'user',
        success(res) {
          if (res.status == 1) {
            that.ewm = res.data.other.erweima
            that.moneyArr = res.data.other.recharge
            that.userinfo = res.data.userinfo
            that.taskList = res.data.task_list
            uni.setStorageSync('userinfo', that.userinfo)
            uni.setStorageSync('jump_appid', res.data.other.jump_appid)
            uni.setStorageSync('wx_link', res.data.other.wx_link)
            uni.setStorageSync('corpid', res.data.other.corpid)

            console.log(res.data.userinfo.js_is_open)

            if (
              uni.getStorageSync('_ou_coupon_id') &&
              uni.getStorageSync('token')
            ) {
              setTimeout(() => {
                that.receiveCoupon()
              }, 100)
            }

            that.menuList.map(item => {
              /* 判断集市是否展示 */
              if (
                item.id == 11 &&
                res.data.userinfo.js_is_open == 1 &&
                res.data.userinfo.is_show_js == 1
              ) {
                item.show = true
              }

              /* 判断兑换是否展示 */
              if (item.id == 2 && res.data.userinfo.dh_is_open == 1) {
                item.show = true
              }
            })
          }
        }
      })
    },
    getmycollect() {
      let that = this
      that.req({
        url: 'listCollect',
        Loading: true,
        data: {
          type: that.show
        },
        success(res) {
          if (res.status == 1) {
            that.mycollectArr = res.data.data
          }
        }
      })
    },
    tixian_click() {
      let that = this
      console.log(that.money_2)
      that.req({
        url: 'withdraw',
        data: {
          type: that.tixian_index,
          money: that.money_2,
          name: that.name,
          number: that.number
        },
        success(res) {
          that.money_2 = ''
          if (res.status == 0) {
            that.tixian_show = false
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.pop_title {
  font-size: 48rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-bottom: 30rpx;
}
.mineInfo {
  width: 720rpx;
  /* height: 323rpx; */
  /* background: url(https://xiongmaomh.languoyun.cn/newindex/mineTop.png) no-repeat; */
  background-size: 100% 100%;
  box-sizing: border-box;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 35rpx 36rpx 0;
}

page {
  /* background: #000000; */
}
.selTitle {
  font-size: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0px 3px 8px rgba(48, 251, 253, 0.32);
}
.noTitle {
  font-size: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #666666;
}
.qiehuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 750rpx;
}

.qiehuan_line {
  margin: -10rpx auto;
  width: 30rpx;
  height: 20rpx;
  border-bottom: 4rpx solid #1ff7f0;
  border-radius: 4rpx;
}

.qiehuan image {
  width: 169rpx;
  height: 38rpx;
}

.qiehuan > view {
  flex: 1;
  text-align: center;
}

.wzs {
  font-size: 28rpx;
  color: rgb(255, 255, 255);
}

.xzs {
  font-size: 32rpx;
  color: #ffffff;
  text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7);
}

button::after {
  border: none;
}

button {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54rpx;
  height: 54rpx;
}

.name_phone > input {
  font-size: 28rpx;
  margin-left: 40rpx;
}

.name_phone {
  padding: 20rpx 0;
  box-sizing: border-box;
  border-bottom: 1px solid #eeeeee;
}

.pop_tixian_input {
  margin: 20rpx 0;
  padding-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  border-bottom: 1px solid #eeeeee;
}

.pop_head > view {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  margin-top: 20rpx;
}

.pop_head {
  display: flex;
  justify-content: space-between;
}

.pop_box > view {
  width: 180rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
  margin-right: 35rpx;

  font-size: 28rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
}
.pop_box > view:nth-child(3n + 3) {
  margin-right: 0;
}
.pop_box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.pop_coucent > input {
  width: 630rpx;
  height: 88rpx;
  background: #222222;
  border: none;
  border-radius: 10rpx;
  padding-left: 40rpx;
  font-size: 24rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
}

.pop_coucent {
  width: 690rpx;
  // border: 1rpx solid #fff;
  // box-shadow: 0px 0px 10rpx 0px #1ff7f0;
  padding: 30rpx;
  background: rgba(34, 34, 34, 0.5);
  box-sizing: border-box;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #ffffff;
}

.pop_chongzhi {
  width: 692rpx;
  height: 88rpx;
  margin: 48rpx auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
}

.ca {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.order_title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #ffffff;
  position: relative;
  font-weight: normal;
  padding: 10rpx 0;

  .title {
    text-align: center;

    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
  }
}

.order {
  width: 750rpx;
  background: #0d0d0d;
  border-radius: 30rpx 30rpx 0px 0px;
  padding: 10rpx 30rpx 48rpx;
  box-sizing: border-box;
  position: absolute;
  bottom: var(--window-bottom);

  border-top: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #000, #000),
    linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);

  .chong-bt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 0 0;

    .money {
      font-size: 28rpx;
      font-family: zihun152hao-jijiachaojihei;
      font-weight: 400;
      color: #ffffff;
    }

    .pay-btn {
      width: 206rpx;
      height: 84rpx;
    }
  }
}

.pop > image:nth-of-type(1) {
  width: 330rpx;
  height: 330rpx;
  margin: 292rpx auto 0;
  display: block;
}

.pop {
  width: 690rpx;
  height: 690rpx;
  padding-top: 1rpx;
  box-sizing: border-box;
  position: relative;

  image:nth-of-type(1) {
    width: 400rpx;
    height: 400rpx;
    margin: 66rpx auto 0;
    display: block;
  }

  .icon {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 160%);

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.mengban {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
}

.p_t_r {
  position: absolute;
  top: -20rpx;
  right: -10rpx;
  width: 32rpx !important;
  height: 32rpx !important;
}

.shop_item > image {
  width: 216rpx;
  height: 216rpx;
  border-radius: 8rpx 8rpx 0 0;
  margin: 13rpx auto;
  display: block;
}

.shop_text > .hang1 {
  margin-bottom: 10rpx;
}

.shop_text {
  padding: 2rpx 23rpx;
  box-sizing: border-box;
}

.shop_item {
  width: 242rpx;
  height: 343rpx;
  /* border-radius: 10rpx; */
  margin-top: 10rpx;
  position: relative;
  color: #ffffff;
  font-size: 24rpx;
}

.shop_coucent > view:nth-child(3n-1) {
  margin: 10rpx 0rpx 0;
}

.shop_coucent {
  display: flex;
  flex-wrap: wrap;
  font-size: 24rpx;
}

.sc_title {
  width: 686rpx;
  height: 22rpx;
  margin: 0 auto;
}

.tuijian {
  width: 750rpx;
  padding: 0 13rpx 100rpx 13rpx;
  box-sizing: border-box;
  margin: 30rpx auto;
  /* background-color: #222; */
}

.list > view > view > image {
  margin-right: 20rpx;
}

.list image {
  width: 12rpx;
  height: 22rpx;
}

.list > view > view > image:nth-of-type(1) {
  width: 32rpx;
  height: 32rpx;
}

.list > view > view {
  display: flex;
  align-items: center;
}

.list > view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-bottom: 1px solid #EEEEEE; */
  padding: 24rpx 0;
}

.list {
  width: 710rpx;
  /* height: 700rpx; */
  margin: 0 auto;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #ffffff;

  /* background: linear-gradient(135deg, transparent 10px, #F07D17 0); */
  /* 	background: url(https://hdyfs.languowangluo.cn/zcq/mine/cz_bg.png) no-repeat; */
  /* background-size: 100% 100%; */
}

.hegui image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.hegui > image {
  width: 40rpx;
  height: 40rpx;
  margin: 0;
}

.hegui > view {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 28rpx;
}

.hegui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 690rpx;
  height: 99rpx;
  background: rgba(15, 31, 67, 0.43);
  border: 1px solid;
  border-image: linear-gradient(269deg, #1ed3f9, #a31f9e, #2ad3f3, #c41fc1) 1 1;
  border-radius: 10rpx;
  margin: 30rpx auto;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.tixian_r > image {
  width: 143rpx;
  height: 59rpx;
}
.tixian_r {
  text-align: right;
}
.tixian_r > view:nth-child(2) {
  width: 132rpx;
  height: 48rpx;
  background: #1ac762;
  border-radius: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #ffffff;
  margin-top: 20rpx;
}

.tixian_r > view:nth-child(1) {
  width: 132rpx;
  height: 48rpx;
  border: 1px solid #1ac762;
  color: #1ac762;
  border-radius: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  /* text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7);
		font-family: 'zcq'; */
}

.tixian_l image {
  width: 12rpx;
  height: 22rpx;
  margin-left: 10rpx;
}

.tixian_l {
  font-size: 28rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
}

.tixian {
  width: 720rpx;
  height: 210rpx;
  margin: 30rpx auto 0;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 46rpx;
  box-sizing: border-box;
  color: #ffffff;
}

.youhui text {
  margin-right: 10rpx;
  font-size: 32rpx;
  /* font-family: 'zcq'; */
}

.youhui > view > view:nth-of-type(2) {
  font-size: 24rpx;
  margin-top: 28rpx;
}

.youhui > view:nth-of-type(1)::after,
.youhui > view:nth-of-type(2)::after {
  content: '';
  width: 2rpx;
  height: 40rpx;
  /* background: #FFFFFF; */
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.youhuiTitle {
  font-size: 28rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
}
.youhui > view {
  font-size: 24rpx;
  text-align: center;
  position: relative;
  flex: 1;
}

.youhui {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 690rpx; */
  height: 193rpx;
  margin: 0rpx auto 0;
  color: #ffffff;
  padding-bottom: 30rpx;
}

.id_z > image {
  width: 84rpx;
  height: 20rpx;
  margin-left: 20rpx;
}

.id_z {
  font-size: 24rpx;
  margin-top: 10rpx;
  color: #999999;
}

.phone_z {
  font-size: 32rpx;
  /* font-weight: bold; */
}

.headimg {
  width: 105rpx;
  height: 105rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.jp_headimg > image {
  width: 132rpx;
  height: 132rpx;
  /* border: 1px solid #FE0032; */
  border-radius: 50%;
  /* 	clip-path: polygon(50% 10%, 85% 30%, 85% 70%, 50% 92%, 17% 71%, 16% 30%); */
  /* polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0) */
}

.jp_headimg {
  width: 132rpx;
  height: 132rpx;
  margin: 25rpx 0 0 12rpx;
}

.head_name {
  display: flex;
  justify-content: space-between;
  position: relative;
  /* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
}

.header_title {
  font-size: 40rpx;
  font-family: iFontszhounianti;
  font-weight: bold;
  font-style: oblique;
  color: #ffffff;
}

// .header {
//   width: 100%;
//   position: fixed;
//   left: 0;
//   top: 0;
//   z-index: 10;

//   .header-left-title {
//     height: 88rpx;
//     font-weight: bold;
//     color: #ffffff;
//     display: flex;
//     align-items: center;
//     padding-left: 26rpx;

//     image {
//       width: 202rpx;
//       height: 42rpx;
//     }
//   }
// }

.mine {
  width: 100vw;
  /* height: 100vh; */
  /* background: #222222; */
  position: relative;
  padding-bottom: 50rpx;
  min-height: 100vh;
  box-sizing: border-box;

  .user-card {
    width: 690rpx;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    padding: 30rpx;

    .user-info {
      display: flex;
      align-items: center;

      .avatar {
        width: 122rpx;
        height: 122rpx;
        border: 2rpx solid #e40d1d;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        width: calc(100% - 122rpx);
        box-sizing: border-box;
        padding-left: 30rpx;

        .nick {
          max-width: 200rpx;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }

        .user-day {
          margin-top: 10rpx;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #cccccc;
        }
      }
    }

    .lv-box {
      margin-top: 30rpx;
      position: relative;

      .lv {
        display: flex;
        align-items: center;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;

        .icon {
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
        }
      }

      .progress {
        width: 450rpx;
        padding: 4rpx 0;

        /deep/.cmd-progress-inner {
          background: rgba(255, 255, 255, 0.2);
        }
      }

      .should {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #cccccc;
      }

      .quan-yi {
        width: 130rpx;
        height: 50rpx;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .rbtn {
      position: absolute;
      z-index: 10;
      right: 30rpx;
      top: 30rpx;
      width: 96rpx;
      height: 112rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .money-list {
    padding: 1rpx 30rpx 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .money-item {
      width: 332rpx;
      height: 144rpx;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-evenly;
      box-sizing: border-box;
      padding: 0 20rpx;
      margin-top: 20rpx;

      .money-title {
        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff,
          0 0 2px #ffffff;
      }

      .money-btn {
        display: flex;
        align-items: center;

        .money {
          flex: 1;
          padding-right: 20rpx;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #ffffff;
          word-wrap: break-word;
          word-break: break-all;
        }

        .btn {
          width: 124rpx;
          height: 48rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  // .money-card {
  //   width: 690rpx;
  //   margin: 60rpx auto 0;
  //   padding: 60rpx 0 50rpx;

  //   .money {
  //     display: flex;
  //     align-items: flex-end;
  //     padding: 0 60rpx;

  //     font-size: 60rpx;
  //     font-family: Source Han Sans CN;
  //     font-weight: 500;
  //     color: #d0d1ff;

  //     .money-detail {
  //       display: flex;
  //       align-items: center;
  //       padding-left: 16rpx;
  //       line-height: 56rpx;

  //       font-size: 24rpx;
  //       font-family: Source Han Sans CN;
  //       font-weight: 400;
  //       color: #cccccc;

  //       .icon {
  //         width: 24rpx;
  //         height: 24rpx;
  //       }
  //     }
  //   }

  //   .other-num {
  //     display: flex;
  //     justify-content: space-around;
  //     padding: 40rpx 0 0;

  //     .other-item {
  //       display: flex;
  //       flex-flow: column nowrap;
  //       align-items: center;
  //       width: 30%;

  //       .title {
  //         font-size: 24rpx;
  //         font-family: Source Han Sans CN;
  //         font-weight: 400;
  //         color: #ffffff;
  //       }

  //       .num {
  //         margin-top: 10rpx;

  //         font-size: 40rpx;
  //         font-family: Source Han Sans CN;
  //         font-weight: 500;
  //         color: #ffffff;
  //       }
  //     }
  //   }
  // }

  .task {
    margin: 30rpx auto 0;
    width: 690rpx;
    box-sizing: border-box;
    padding: 0 30rpx 20rpx;

    .task-title {
      padding: 30rpx 0 0;

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      text-shadow: 0 0 2px #FF1010, 0 0 2px #FF1010, 0 0 2px #FF1010,
        0 0 2px #FF1010;
    }

    .task-item {
      padding: 20rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .task-l {
        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }

        .num {
          margin: 4rpx 0;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }

        .progress {
          display: flex;
          align-items: center;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;

          .progress-inner {
            width: 300rpx;
            margin-right: 6rpx;

            /deep/.cmd-progress-inner {
              background: #333333;
            }
          }
        }
      }

      .task-r {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-left: 30rpx;

        .btn {
          width: 120rpx;
          height: 48rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          filter: grayscale(1);

          font-family: 光良酒-干杯体, 光良酒-干杯体;
          font-weight: 400;
          font-size: 20rpx;
          color: #000000;
          text-shadow: 0 0 1px #ffffff, 0 0 1px #ffffff, 0 0 1px #ffffff,
            0 0 1px #ffffff;

          &.act {
            filter: grayscale(0);
          }
        }
      }
    }
  }

  .menu-card {
    margin: 30rpx auto 0;
    width: 690rpx;
    padding: 1rpx 0 40rpx;
    box-sizing: border-box;
    background: rgba(34, 34, 34, 0.3);
    border: 4rpx solid #cccccc;
    display: flex;
    flex-flow: row wrap;

    .menu-item {
      margin-top: 40rpx;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      width: 25%;
      position: relative;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      .title {
        margin-top: 10rpx;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }
}

.copyright {
  padding: 30rpx;
  text-align: center;
  font-size: 24rpx;
  color: #888;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  font-size: 40rpx;
  font-family: iFontszhounianti;
  font-weight: bold;
  font-style: oblique;
  color: #ffffff;
  margin-bottom: 10rpx;
}

.cdk-pop {
  width: 590rpx;
  height: 350rpx;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  position: relative;

  .cdk-pop-hd {
    padding: 40rpx 0 0;

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    text-shadow: 0 0 4px #000000, 0 0 4px #000000, 0 0 4px #000000,
      0 0 4px #000000;
  }

  .cdk-pop-bd {
    margin: 60rpx 0 0;
    width: 512rpx;
    height: 74rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    align-items: center;

    input {
      flex: 1;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #333;
    }
  }

  .cdk-pop-ft {
    width: 500rpx;
    height: 88rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 150%);
  }
}

.res-pop {
  position: relative;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .suc-list {
    padding: 1rpx 0 0;

    .suc-title {
      width: 362rpx;
      height: 63rpx;
      margin: 0 auto;
    }

    .list-wrap {
      max-height: 700rpx;
      margin-top: 50rpx;

      .list-item {
        width: 690rpx;
        box-sizing: border-box;
        padding: 40rpx 30rpx 40rpx 10rpx;
        display: flex;
        align-items: center;
        margin: 0 auto 20rpx;

        .money {
          width: 160rpx;
          text-align: center;
          // background: #f00;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;

          text {
            font-size: 34rpx;
          }
        }

        .info {
          flex: 1;
          padding-left: 20rpx;

          .title {
            max-width: 400rpx;

            font-size: 32rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }

          .time {
            margin-top: 20rpx;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #cccccc;
          }
        }

        .btn {
          width: 132rpx;
          height: 52rpx;
        }

        .pic {
          width: 100rpx;
          height: 100rpx;
          margin: 0 30rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          .title {
          }
          .hang1 {
          }
        }
      }
      .common_bg {
      }
    }

    .list-num {
      text-align: center;

      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      text {
        color: #d0d1ff;
      }
    }
  }

  .close {
    width: 196rpx;
    height: 78rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 200%);
  }
  .icon {
  }
}
</style>
